<script setup lang="ts">
import { QAvatar, QTooltip } from "quasar";
import {} from "vue";

import { User } from "qqlx-core";
import { getUserAvatar, getUserName } from "qqlx-cdk";

const vueProps = defineProps<{
  size?: number;
  user?: User;
  labelPre?: string;
  noTooltip?: boolean;
}>();
</script>

<template>
  <q-avatar rounded :size="`${vueProps.size || 40}px`" class="rounded">
    <slot></slot>
    <img :src="getUserAvatar(vueProps.user)" />
    <q-tooltip v-if="!vueProps.noTooltip" class="text-lg"> {{ vueProps.labelPre || "" }}{{ getUserName(vueProps.user) }} </q-tooltip>
  </q-avatar>
</template>

<style></style>
